<!--  -->
<template>
	<div class="lsh-draw-box">
		<div class="lsh-draw-content">
			<slot />
		</div>
		<div class="lsh-tool-box">
			<IconBtn
				name="draw-mouse"
				:active="activeTool === ''"
				@click="setActiveTool('')"
				tip-text="鼠标"
				v-if="toolConfig?.setMouse"
			/>
			<SetPopover v-model="config" type="pen">
				<IconBtn
					name="draw-pen"
					:active="activeTool === 'pen'"
					@click="setActiveTool('pen')"
					tip-text="画笔"
					:tip-tag-list="toolConfigMap['pen'].tip"
				/>
			</SetPopover>
			<SetPopover v-model="config" type="text">
				<IconBtn
					name="draw-text"
					:active="activeTool === 'text'"
					@click="setActiveTool('text')"
					tip-text="文字"
					:tip-tag-list="toolConfigMap['text'].tip"
				/>
			</SetPopover>

			<SetPopover v-model="config" type="shape">
				<IconBtn
					:name="`draw-shape-${config.shape.type}`"
					:active="activeTool === 'shape'"
					@click="setActiveTool('shape')"
					tip-text="图形"
					:tip-tag-list="toolConfigMap['shape'].tip"
				/>
			</SetPopover>

			<IconBtn
				name="draw-eraser"
				:active="activeTool === 'eraser'"
				@click="setActiveTool('eraser')"
				tip-text="橡皮擦"
				:tip-tag-list="toolConfigMap['eraser'].tip"
			>
			</IconBtn>
			<IconBtn
				name="draw-undo"
				@click="historyUtil.undo()"
				tip-text="撤销"
				:disabled="!historyUtil.canUndo.value"
				:tip-tag-list="toolConfigMap['undo'].tip"
			>
			</IconBtn>
			<Popconfirm
				:ok-text="'清空'"
				:okButtonProps="{
					// status: 'danger',
					// type: 'outline',
				}"
				@ok="clear()"
				content="确定清空所有批注？"
			>
				<div>
					<IconBtn name="clear" tip-text="清屏"> </IconBtn>
				</div>
			</Popconfirm>
			<a-trigger trigger="click" v-if="toolConfig?.setLable">
				<div class="has-divider">
					<IconBtn name="draw-label" tip-text=""> 标签 </IconBtn>
				</div>
				<template #content>
					<div class="lsh-menu-box">
						<div
							:class="{
								'lsh-menu-item': true,
								active: item.value === nowLabel
							}"
							v-for="item in labelList"
							:key="item.value"
							:style="{ color: item.color }"
							@click="hanClickLabel(item.value)"
						>
							{{ item.label }}
						</div>
					</div>
				</template>
			</a-trigger>
		</div>
	</div>
</template>

<script setup lang="ts">
import IconBtn from '../icon-btn/index.vue'
import { TagTypeEnum } from '@/constants/index'
import { useDrawing } from '../../hooks/useDraw'
import SetPopover from '../set-popover/index.vue'
import Popconfirm from '@/components/_shared/components/popconfirm/index.vue'
const props = defineProps<{
	toolConfig: {
		setLable?: boolean
		setMouse?: boolean
	}
	mark: ReturnType<typeof useDrawing>
}>()
const nowLabel = defineModel<string>('label', {
	default: ''
})
const { historyUtil, clear, config, activeTool, setActiveTool } = props.mark
const labelList = [
	{
		color: '#26A555',
		label: '优秀作答',
		value: '优秀作答',
		class: TagTypeEnum.correct
	},
	{
		color: '#ff4c26',
		label: '典型错误',
		value: '典型错误',
		class: TagTypeEnum.error
	}
]
const hanClickLabel = (v: string) => {
	if (nowLabel.value === v) return (nowLabel.value = '')
	nowLabel.value = v
}
const toolConfigMap = {
	pen: {
		tip: [
			{
				text: '画笔',
				tagList: ['P']
			}
		]
	},
	text: {
		tip: [
			{
				text: '文字',
				tagList: ['T']
			}
		]
	},
	shape: {
		tip: [
			{
				text: '圆形',
				tagList: ['O']
			},
			{
				text: '正方形',
				tagList: ['R']
			}
		]
	},
	eraser: {
		tip: [
			{
				text: '橡皮擦',
				tagList: ['E']
			}
		]
	},
  undo: {
		tip: [
			{
				text: '撤销',
				tagList: ['Ctrl+Z']
			}
		]
	},

}
</script>
<style scoped lang="less">
.lsh-draw-box {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 16px;
	.lsh-draw-content {
		width: 100%;
		flex: 1;
		display: flex;
		overflow: hidden;
		position: relative;
	}
	.lsh-tool-box {
		width: 100%;
		height: 58px;
		padding: 4px;
		background: #fff;
		border-top: 1px solid #f2f5fa;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		.has-divider {
			position: relative;
			margin-left: 8px;
			&::before {
				content: '';
				height: 8px;
				width: 1px;
				background: #e1e5eb;
				position: absolute;
				left: -8px;
				top: 50%;
				transform: translateY(-50%);
			}
		}
	}
}
</style>
<style lang="less">
.lsh-menu-box {
	border-radius: 16px;
	border: 1px solid #e1e5eb;
	background: #fff;

	/* 气泡弹窗投影 */
	box-shadow: 0px 0px 20px 0px rgba(85, 124, 167, 0.12);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	.lsh-menu-item {
		border-radius: 4px;
		border: 1px dashed #e1e5eb;
		height: 28px;
		padding: 0 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		position: relative;
		user-select: none;
		&.active {
			border: 1px solid #0065ff;
			background: rgba(0, 101, 255, 0.08);
			&::after {
				content: url('@/assets/icons/draw-checked.svg');
				position: absolute;
				bottom: -1px;
				right: -1px;
				width: 14px;
				height: 14px;
				background-color: #0065ff;
				border-bottom-right-radius: 4px;
				border-top-left-radius: 4px;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}
</style>
